
<template>
  <div class="form-container">
    <el-form ref="form" :model="formData" label-width="80px" :rules="rules"  >
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="性别：" style="font-weight: bold;" prop="sex">
            <el-radio-group v-model="formData.sex">
              <el-radio label=" Male">男</el-radio>
              <el-radio label=" Female">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="年龄：" style="font-weight: bold;" prop="age">
            <el-input type="number" v-model.number="formData.age" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="工人阶级：" style="font-weight: bold;" prop="workclass" label-width="120px">
            <el-select v-model="formData.workclass" placeholder="请选择" filterable>
              <el-option label="私人" value=" Private"></el-option>
              <el-option label="自雇非公司" value=" Self-emp-not-inc"></el-option>
              <el-option label="自雇公司" value=" Self-emp-inc"></el-option>
              <el-option label="联邦政府" value=" Federal-gov"></el-option>
              <el-option label="地方政府" value=" Local-gov"></el-option>
              <el-option label="州政府" value=" State-gov"></el-option>
              <el-option label="无薪" value=" Without-pay"></el-option>
              <el-option label="从未工作过" value=" Never-worked"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="学历：" style="font-weight: bold;" prop="education">
            <el-select v-model="formData.education" placeholder="请选择" filterable>
              <el-option label="本科" value=" Bachelors"></el-option>
              <el-option label="大学" value=" Some-college"></el-option>
              <el-option label="11年级" value=" 11th"></el-option>
              <el-option label="高中毕业" value=" HS-grad"></el-option>
              <el-option label="专业学校" value=" Prof-school"></el-option>
              <el-option label="学术副学士学位" value=" Assoc-acdm"></el-option>
              <el-option label="职业副学士学位" value=" Assoc-voc"></el-option>
              <el-option label="9年级" value=" 9th"></el-option>
              <el-option label="7-8年级" value=" 7th-8th"></el-option>
              <el-option label="12年级" value=" 12th"></el-option>
              <el-option label="硕士学位" value=" Masters"></el-option>
              <el-option label="1-4年级" value=" 1st-4th"></el-option>
              <el-option label="10年级" value=" 10th"></el-option>
              <el-option label="博士学位" value=" Doctorate"></el-option>
              <el-option label="5-6年级" value=" 5th-6th"></el-option>
              <el-option label="学前教育" value=" Preschool"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="受教育年限：" style="font-weight: bold;" prop="education_num" label-width="120px">
            <el-input type="number" v-model.number="formData.education_num" placeholder="请输入受教育年限"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="婚姻情况：" style="font-weight: bold;" label-width="120px" prop="marital_status">
            <el-select v-model="formData.marital_status" placeholder="请选择" filterable>
              <el-option label="已婚配偶" value=" Married-civ-spouse"></el-option>
              <el-option label="离异" value=" Divorced"></el-option>
              <el-option label="未婚" value=" Never-married"></el-option>
              <el-option label="分居" value=" Separated"></el-option>
              <el-option label="丧偶" value=" Widowed"></el-option>
              <el-option label="已婚配偶缺席" value=" Married-spouse-absent"></el-option>
              <el-option label="未知" value=" Married-AF-spouse"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="职业：" style="font-weight: bold;" prop="occupation">
            <el-select v-model="formData.occupation" placeholder="请选择职业" filterable>
              <el-option label="技术支持" value=" Tech-support"></el-option>
              <el-option label="工艺维修" value=" Craft-repair"></el-option>
              <el-option label="其他服务" value=" Other-service"></el-option>
              <el-option label="销售" value=" Sales"></el-option>
              <el-option label="行政管理" value=" Exec-managerial"></el-option>
              <el-option label="专业教授" value=" Prof-specialty"></el-option>
              <el-option label="搬运员" value=" Handlers-cleaners"></el-option>
              <el-option label="清洁工" value=" Handlers-cleaners"></el-option>
              <el-option label="机器操作检查" value=" Machine-op-inspct"></el-option>
              <el-option label="行政文书" value=" Adm-clerical"></el-option>
              <el-option label="农业捕捞" value=" Farming-fishing"></el-option>
              <el-option label="运输搬运" value=" Transport-moving"></el-option>
              <el-option label="私房服务" value=" Priv-house-serv"></el-option>
              <el-option label="保护服务" value=" Protective-serv"></el-option>
              <el-option label="武装部队" value=" Armed-Forces"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="与本人的关系：" style="font-weight: bold;" label-width="120px" prop="relationship">
            <el-select v-model="formData.relationship" placeholder="请选择" filterable>
              <el-option label="妻子" value=" Wife"></el-option>
              <el-option label="自己的孩子" value=" Own-child"></el-option>
              <el-option label="丈夫" value=" Husband"></el-option>
              <el-option label="不属于家族" value=" Not-in-family"></el-option>
              <el-option label="其他关系" value=" Other-relative"></el-option>
              <el-option label="未婚" value=" Unmarried"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="种族：" style="font-weight: bold;" label-width="120px" prop="race">
            <el-select v-model="formData.race" placeholder="请选择" filterable>
              <el-option label="白人" value=" White"></el-option>
              <el-option label="亚洲太平洋岛民" value=" Asian-Pac-Islander"></el-option>
              <el-option label="美国印第安爱斯基摩人" value=" Amer-Indian-Eskimo"></el-option>
              <el-option label="其他" value=" Other"></el-option>
              <el-option label="黑人" value=" Black"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="公司收益：" style="font-weight: bold;" prop="capital_gain" label-width="120px">
            <el-input type="number" v-model.number="formData.capital_gain" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="公司损失：" style="font-weight: bold;" prop="capital_loss" label-width="120px">
            <el-input type="number" v-model.number="formData.capital_loss" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="每周工作小时数：" style="font-weight: bold;" prop="hours_per_week" label-width="150px">
            <el-input type="number" v-model.number="formData.hours_per_week" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="籍贯：" style="font-weight: bold;" prop="native_country" label-width="120px">
            <el-select v-model="formData.native_country" placeholder="请选择" filterable>
              <el-option label="美国" value=" United-States"></el-option>
              <el-option label="柬埔寨" value=" Cambodia"></el-option>
              <el-option label="英国" value=" England"></el-option>
              <el-option label="波多黎各" value=" Puerto-Rico"></el-option>
              <el-option label="加拿大" value=" Canada"></el-option>
              <el-option label="德国" value=" Germany"></el-option>
              <el-option label="美国境外（关岛US VI等）" value=" Outlying-US(Guam-USVI-etc)"></el-option>
              <el-option label="印度" value=" India"></el-option>
              <el-option label="日本" value=" Japan"></el-option>
              <el-option label="希腊" value=" Greece"></el-option>
              <el-option label="南部" value=" South"></el-option>
              <el-option label="中国" value=" China"></el-option>
              <el-option label="古巴" value=" Cuba"></el-option>
              <el-option label="伊朗" value=" Iran"></el-option>
              <el-option label="洪都拉斯" value=" Honduras"></el-option>
              <el-option label="菲律宾" value=" Philippines"></el-option>
              <el-option label="意大利" value=" Italy"></el-option>
              <el-option label="波兰" value=" Poland"></el-option>
              <el-option label="牙买加" value=" Jamaica"></el-option>
              <el-option label="越南" value=" Vietnam"></el-option>
              <el-option label="墨西哥" value=" Mexico"></el-option>
              <el-option label="葡萄牙" value=" Portugal"></el-option>
              <el-option label="爱尔兰" value=" Ireland"></el-option>
              <el-option label="法国" value=" France"></el-option>
              <el-option label="多米尼加共和国" value=" Dominican-Republic"></el-option>
              <el-option label="老挝" value=" Laos"></el-option>
              <el-option label="厄瓜多尔" value=" Ecuador"></el-option>
              <el-option label="台湾" value=" Taiwan"></el-option>
              <el-option label="海地" value=" Haiti"></el-option>
              <el-option label="哥伦比亚" value=" Columbia"></el-option>
              <el-option label="匈牙利" value=" Hungary"></el-option>
              <el-option label="危地马拉" value=" Guatemala"></el-option>
              <el-option label="尼加拉瓜" value=" Nicaragua"></el-option>
              <el-option label="苏格兰" value=" Scotland"></el-option>
              <el-option label="泰国" value=" Thailand"></el-option>
              <el-option label="南斯拉夫" value=" Yugoslavia"></el-option>
              <el-option label="萨尔瓦多" value=" El-Salvador"></el-option>
              <el-option label="特立尼达和多巴哥" value=" Trinadad&Tobago"></el-option>
              <el-option label="秘鲁" value=" Peru"></el-option>
              <el-option label="香港" value=" Hong"></el-option>
              <el-option label="荷兰" value=" Holand-Netherlands"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
      </el-row>
      <el-row>
      </el-row>

      <el-row>
        <el-col :span="24" style="display: flex; align-items: center;">
          <span style="margin-left: 40px; font-weight: bold">模型选择：</span>

          <el-form-item prop="mode">
            <el-select v-model="formData.mode">
            <el-option label="逻辑回归" value="lg"></el-option>
            <el-option label="决策树" value="dt"></el-option>
            <el-option label="KNN" value="knn"></el-option>
            <el-option label="贝叶斯算法建模" value="by"></el-option>
            <el-option label="支持向量机" value="svn"></el-option>
            <el-option label="随机森林" value="rf"></el-option>
            </el-select>

            <el-button type="primary" @click="predictButtonHandler" style="margin-left: 40px">预测</el-button>

          </el-form-item>

          <div style="margin-left: 40px">
            <span v-if="res === 1" style="color: red">薪资>50K</span>
            <span v-else-if="res === 0" style="color: blue">薪资<=50K</span>
          </div>

        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<script >
export default {
  name: 'app',
  components: {},
  data () {
    return {
      testFormData:{
        name: ''
      },

      // 表单数据
      formData: {
        sex: '',
        age: 18,
        workclass: '',
        fnlwgt: 189793,
        education: '',
        education_num: 0,
        marital_status: '',
        occupation: '',
        relationship: '',
        race: '',
        capital_gain: 0,
        capital_loss: 0,
        hours_per_week: 0,
        native_country: '',
        mode: ''
      },
      //预测结果
      res: 2,
      rules: {
        sex: [
          { required: true, message: '性别不能为空', trigger: 'change' }
        ],
        age: [
          { required: true, message: '年龄不能为空' },
          { type: 'number', message: '年龄必须为数字' }
        ],
        workclass: [
          { required: true, message: '工人阶级不能为空', trigger: 'change' }
        ],
        education: [
          { required: true, message: '学历不能为空', trigger: 'change' }
        ],
        education_num: [
          { required: true, message: '受教育年限不能为空', trigger: 'change' },
          { type: 'number', message: '受教育年限必须为数字' }
        ],
        marital_status: [
          { required: true, message: '婚姻情况不能为空', trigger: 'change' }
        ],
        occupation: [
          { required: true, message: '职业不能为空', trigger: 'change' }
        ],
        relationship: [
          { required: true, message: '与本人的关系不能为空' }
        ],
        race: [
          { required: true, message: '种族不能为空' }
        ],
        capital_gain: [
          { type: "number", message: '资本收益必须为数字' }
        ],
        capital_loss: [
          { type: "number", message: '资本损失必须为数字' }
        ],
        hours_per_week: [
          { required: true, message: '每周工作小时数不能为空' }
        ],
        native_country: [
          { required: true, message: '籍贯不能为空', trigger: 'change' }
        ],
        mode: [
          { required: true, message: '请选择模型', trigger: 'change' }
        ]
      }


    }
  },

  methods: {
    // 预测按钮事件
    predictButtonHandler () {
      this.$refs.form.validate((Valid) => {
        if (Valid) {
          alert('表单验证成功!');
        } else {
          alert('表单验证失败!');
          return false;
        }
      });

      console.log(this.formData)

      this.$http({
        method: 'post',
        url: '/predictSalary',
        data: this.formData
      })
        .then(response => {
          if (response.data.code === 200){
            this.res = response.data.data
          }

        })
        .catch(error => {
          console.log(error.message)
        })

      this.res = null

    }
  }
}
</script>


<style scoped>
.form-container {
  display: flex;
  flex-wrap: wrap;

}

.el-row {
  width: 100%;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-form-item__label {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>
